<template>
  <div>
    <slot v-bind="{ prop }" />
    <div>
      <button @click="changeProps">Change props</button>
    </div>
  </div>
</template>
<script setup>
import { ref, inject } from 'vue';
const prop = ref('Slot prop');
const exposed = ref('Exposed prop');
defineExpose({ prop: exposed });
const provided = inject('providedProp');
provided.value = 'Provided prop';

const changeProps = () => {
  [prop, exposed, provided].forEach(r => r.value += 'changed')
};
</script>